<script setup lang="ts" name="Login">
import { ref } from "vue";
import { useUserStore } from "@/stores/user";
import { ElMessage } from 'element-plus'
import { useRouter } from "vue-router";
import { isEmpty } from '@/utils'

let userName = ref<string>(import.meta.env.MODE === 'development' ? '153249' : '');
let password = ref<string>(import.meta.env.MODE === 'development' ? '123456' : '');
const router = useRouter();
let { login } = useUserStore();
function loginEvent() {
  if (isEmpty(userName.value) || isEmpty(password.value)) {
    ElMessage({
      message: '账号或密码不能为空',
      type: 'warning',
      duration: 3000
    })
    return;
  }
  login({ userName: userName.value, password: password.value }).then((res) => {
    if (res.code === 200) {
      console.log('login success');
      router.push({ path: '/index' });
    }
  });
}
</script>

<template>
  <div class="login">
    <!-- 账号密码和登录按钮 -->
    <!-- 账号 -->
    <form>
      <div class="row">
        <img src="../assets/imgs/username.png" alt="">
        <input type="text" placeholder="请输入账号" class="username" v-model="userName" autocomplete="off" />
      </div>
      <!-- 密码 -->
      <div class="row">
        <img src="../assets/imgs/password.png" alt="">
        <input type="password" placeholder="请输入密码" class="password" v-model="password" @keyup.enter="loginEvent"
          autocomplete="off" />
      </div>
    </form>
    <!-- 登录 -->
    <button type="submit" class="btn" @click="loginEvent">登录</button>
  </div>
</template>



<style scoped lang="scss">
.login {
  width: 1920px;
  height: 1080px;
  background-image: url(../assets/imgs/login-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 260px;

  .row {
    display: flex;
    align-items: center;
    margin-bottom: 30px;

    img {
      width: 30px;
      height: 30px;
      position: relative;
      left: 45px;
    }

    .username,
    .password {
      width: 700px;
      height: 50px;
      border-radius: 32px;
      border: 1px solid #0075ff;
      box-sizing: border-box;
      background-color: #001743;
      color: #fff;
      font-size: 22px;
      padding-left: 50px;

      &:focus {
        outline: 1px solid #0075ff;
      }
    }
  }

  .btn {
    width: 244px;
    height: 50px;
    background: linear-gradient(to right, #00244D, #000615, #002E65);
    border-radius: 28px;
    color: #fff;
    font-size: 20px;
    border: 1px solid #0075ff;
    transition: all .5s;

    &:focus {
      outline: 1px solid #0075ff;
    }

    &:active {
      background: linear-gradient(to right, #000615, #00244D, #002E65);
      border: 1px solid #000615;
    }
  }

}
</style>